<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" style-type="button" active-color="#007aff"
				@clickItem="onClickItem" />
		</view>
		<view class="header">
			<view>
				<text>维修方式:</text>
				<view>
					<uni-data-select v-model="value" :localdata="range"></uni-data-select>
				</view>
			</view>
			<view @click="open">
				<img src="@/static/日期@2x.png" alt="" />
				<text>预约日期</text>
			</view>
		</view>
		<view class="content">
			<view v-if="current === 0">
				<uni-card>
					<view class="maintain-info">
						<text>维修单号:</text>
						<text>336853</text>
					</view>
					<view class="maintain-info">
						<text>维修方式:</text>
						<text>到店维修</text>
					</view>
					<view class="maintain-info">
						<text>预约日期:</text>
						<text>2020-12-21 09:00</text>
					</view>
				</uni-card>
			</view>
			<view v-if="current === 1">
				<uni-card>
					<view class="maintain-info">
						<text>维修单号:</text>
						<text>5533887</text>
					</view>
					<view class="maintain-info">
						<text>维修方式:</text>
						<text>上门取车</text>
					</view>
					<view class="maintain-info">
						<text>预约日期:</text>
						<text>2020-12-21 09:00</text>
					</view>
				</uni-card>
			</view>
		</view>

		<view>
			<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['进行中', '已完成'],
				current: 0,
				value: '',
				range: [{
						value: 1,
						text: "到店维修"
					},
					{
						value: 2,
						text: "上门取车"
					},
				],
			}
		},
		methods: {
			// 切换页面状态
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			// 打开日历
			open() {
				this.$refs.calendar.open();
			},
			// 日历点击确认事件
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.uni-common-mt {
		// margin-top: 30px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 100px;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
	}

	.header>view {
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}

	.header>view:nth-child(1)>text {
		padding-right: 10rpx;
	}

	.header>view:nth-child(1)>view {
		width: 250rpx;
	}

	.header>view:nth-child(2)>img {
		width: 40rpx;
		height: 40rpx;
		padding-right: 6rpx;
	}
	.maintain-info > text:nth-child(1) {
		margin-right: 140rpx;
	}
</style>